<template>
  <div class="header-info">
    <div class="operation">
      <span>
        <el-icon>
          <Message />
        </el-icon>
      </span>
      <span>
        <el-icon>
          <ChatDotRound />
        </el-icon>
      </span>
      <span>
        <el-icon>
          <Search />
        </el-icon>
      </span>
    </div>
    <!-- 个人信息 -->
    <div class="info">
      <el-dropdown>
        <span class="user-info">
          <el-avatar :size="50" class="avatar" :src="tokenStore.avatar" />
          <span class="name">{{ tokenStore.username }}</span>

        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="handlerExitClick">
              <el-icon>
                <CircleCloseFilled />
              </el-icon>
              <span>退出系统</span>
            </el-dropdown-item>

            <el-dropdown-item divided>
              <el-icon>
                <InfoFilled />
              </el-icon>
              <span>个人信息</span>
            </el-dropdown-item>


            <el-dropdown-item>
              <el-icon>
                <Lock />
              </el-icon>
              <span>修改密码</span>
            </el-dropdown-item>

          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { userLoginStore } from '@/store/login/login';
import localCache from '@/utils/cache';
// import { useTokenStore } from  // 请替换为实际的文件路径

// 获取store实例
const tokenStore = userLoginStore();
const router = useRouter()
function handlerExitClick() {
  localCache.removeCache('token')
  router.push('/login')
}


</script>
<style scoped lang="less">
.header-info {
  background-color: #fff;
  display: flex;
  align-items: center;
}

.info {
  :global(.el-dropdown-menu__item) {
    line-height: 36px !important;
    padding: 6px 22px;
  }

  margin-top: 10px;

  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer; //鼠标移入,变小手
  }

  .name {
    margin-left: 5px;
  }
}

.operation {
  display: inline-flex;
  margin-right: 20px;
}

.operation span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 35px;
}

.operation span:hover {
  background: #f2f2f2;
}

.operation i {
  font-size: 20px;
}

.operation .dot {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 10;
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 100%;
}
</style>
